<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;height: 100px;background: red;
        margin-top: 50px}
    </style>
</head>
<body>
<!--
			多物体的运动：

				需求： 移入每个div框让宽度变为500px;

					移出宽度变为100px


			出现的问题： 多个div公用一个计时器， 当你移出第一个div时，是关闭计时器，而你马上又移入一个新的div，马上就开启计时器


			解决问题：  为每个div设置单独的计时器

		-->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script type="text/javascript">
        var div = document.getElementsByTagName("div");
        var timer = null;
        for (var i=0;i<div.length;i++){
            //每个div单独的计时器
            div[i].timer = null;
            div[i].onmouseover = function () {
                startMove(this,500);
            }
            div[i].onmouseout = function () {
                startMove(this,100);
            }
        }


        //注意这里起点不再是offsetLeft
        function startMove(obj,target) {
            // clearInterval(timer);
            clearInterval(obj.timer);
            obj.timer=setInterval(function () {
                // var speed = (target-obj.offsetLeft)/10;
                var speed = (target-obj.offsetWidth)/10;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(target==obj.offsetWidth){
                    clearInterval(timer);
                }else{
                    obj.style.width = obj.offsetWidth+speed+"px";
                }
            })
        }
        

    </script>


</body>
</html>